<template>
     <header class="header">
    <h1>Todo List</h1>
    <div class="add">
      <input type="text" placeholder="请输入待办事项..." 
      v-model.trim="newTodo"
      @keyup.enter="addTodo"
      />
      <button @click="addTodo">添加</button>
    </div>
  </header>
</template>

<script setup>
import { ref } from 'vue'
import {v4 as uuidv4} from 'uuid'
const newTodo = ref('')
const emit =defineEmits(['add-todo'])
function addTodo() {
  if (newTodo.value) {
    const todo = {
      id: uuidv4(),
      text: newTodo.value,
      done: false
    }
    emit('add-todo', todo)
    newTodo.value = ''
  }
}
</script>

<style scoped>
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: column;
  background-color: rgb(42, 150, 250);
  color: white;
  padding: 10px;
}
.add {
  display: flex;
  gap: 10px;
}
.add input {
  width: 300px;
  padding: 10px;
  border: none;
  border-radius: 5px;
}
.add button {
  width: 100px;
  border-radius: 5px;
  border: none;
  color: rgb(42, 150, 250);
}
</style>